<template>
  <div class="charts">
    <div class="charts-header flex-row-between">
      <h1 class="charts-header_title">Chart</h1>
      <span class="charts-header_jump">See all</span>
    </div>
    <div class="charts-main" :key="item.id" v-for="(item, index) in rankSongs">
      <div class="song flex-row-start">
        <div class="song-rank flex-row-center">
          <span class="song-rank_text">{{ 0 + index }}</span>
        </div>
        <div class="song-block flex-row-center">
          <div class="block-album">
            <img
              class="block-album_image"
              :src="item.picUrl"
              alt=""
            />
          </div>
          <div class="block-content">
            <h1 class="block-content_name">{{ item.name }}</h1>
            <p v-if="item.song.artists" class="block-content_desc">{{item.song.artists[0].name}}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "SongsChart",
  props: {
    rankSongs: {
      type: Array,
    },
  },
};
</script>

<style lang='scss' scoped>
@import "./index.scss";
</style>